import React, { useState } from 'react';
import {
  Grid,
  CssBaseline,
  ThemeProvider,
  Box,
  useMediaQuery,
  GlobalStyles,
} from '@mui/material';
import getTheme from 'themes/Theme';
import DashboardDrawer from 'components/organisms/DashboardDrawer';
import DashboardDrawerProtected from 'components/organisms/DashboardDrawerProtected';
import { SnackBar } from 'components/elements/SnackBar';
import Footer from 'components/organisms/Footer';
import { useDarkMode } from 'contexts/DarkMode';
import { useDashboardDrawer } from 'contexts/DashboardDrawerContext';
import { useDashboardDrawerProtected } from 'contexts/DashboardDrawerProtectedContext';
import { useLocation } from 'react-router-dom';
import getNewTheme from 'themes/NewTheme';
import TopIcons from 'components/organisms/TopIcons';
import ScrollToTop from 'components/ui/ScrollToTop';
import { AppBarProvider } from 'contexts/AppBarContext';
import CustomTreeView from 'components/organisms/CustomTreeView';
import AdaptiveLayout from 'components/elements/AdaptiveLayout';
import { useMenu } from 'contexts/MenuContext';

const PublicLayout = ({ children }) => {
  const { darkMode } = useDarkMode();
  const { dashboardDrawerOpen, toggleDashboardDrawer } = useDashboardDrawer();
  const { dashboardDrawerProtectedOpen, toggleDashboardDrawerProtected } = useDashboardDrawerProtected();
  const { isMenuOpen, toggleMenu } = useMenu();
  const isXs = useMediaQuery('(max-width:600px)');
  const location = useLocation();
  const isHomePage = location.pathname === '/';
  // eslint-disable-next-line
  const [useTheme, setUseTheme] = useState(false);

  const theme = useTheme
    ? isHomePage
      ? getNewTheme(darkMode)
      : getNewTheme(darkMode, isXs)
    : isHomePage
      ? getTheme(darkMode)
      : getTheme(darkMode, isXs);
  
  return (
    <AppBarProvider>
      <ThemeProvider theme={theme}>
        <SnackBar>
          <CssBaseline />
          <GlobalStyles 
            styles={{
              'html, body': {
                minHeight: '100vh',
                margin: 0,
                padding: 0,
              },
              body: {
                background: useTheme
                  ? isHomePage
                    ? darkMode 
                      ? 'rgba(13, 14, 14, 1)'
                      : 'linear-gradient(135deg, rgba(0, 2, 3, 0.9) 0%, rgba(33, 33, 33, 0.9) 100%)'
                    : darkMode
                      ? '#000000'
                      : '#ffffff'
                  : isHomePage
                    ? darkMode
                      ? '#000000'
                      : '#ffffff !important'
                    : darkMode
                      ? '#000000'
                      : '#ffffff !important',
              },
            }}
          />
          
          {/* Wrapper Box with height 100% */}
          <Box 
            id="scrollable-container"
            sx={{ height: '100vh', overflowY: 'auto' }}>
            <TopIcons 
              isXs={isXs} 
              isHomePage={isHomePage} 
              useTheme={useTheme}
              toggleDashboardDrawer={toggleDashboardDrawer}
              toggleDashboardDrawerProtected={toggleDashboardDrawerProtected}
              isMenuOpen={isMenuOpen}
              toggleMenu={toggleMenu}
              darkMode={darkMode}
            />
            
            {/* ScrollToTop component */}
            <ScrollToTop
              threshold={100}
              position={{
                bottom: 20,
                right: 20
              }}
              size="small"
            />
            
            <Grid container columns={12}>
              <Grid item xs={12} sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
                {!isXs ? (
                  <AdaptiveLayout
                    backgroundColor={null}
                    marginY={0}
                    paddingY={0}
                    paddingX={0}
                    centered={true}
                    fullWidth={true}
                    useInnerWrapper={true}
                  >
                    <DashboardDrawerProtected
                      anchor="left"
                      open={dashboardDrawerProtectedOpen}
                      toggleDashboardDrawerProtected={toggleDashboardDrawerProtected}
                      darkMode={darkMode}
                    />
                    <DashboardDrawer
                      anchor="left"
                      open={dashboardDrawerOpen}
                      toggleDashboardDrawer={toggleDashboardDrawer}
                      darkMode={darkMode}
                    />
                  </AdaptiveLayout>
                ) : (
                  <>
                    <DashboardDrawerProtected
                      anchor="left"
                      open={dashboardDrawerProtectedOpen}
                      toggleDashboardDrawerProtected={toggleDashboardDrawerProtected}
                      darkMode={darkMode}
                    />
                    <DashboardDrawer
                      anchor="left"
                      open={dashboardDrawerOpen}
                      toggleDashboardDrawer={toggleDashboardDrawer}
                      darkMode={darkMode}
                    />
                  </>
                )}
              </Grid>
              
              <Grid item xs={12} sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
                <AdaptiveLayout
                  backgroundColor={null}
                  marginY={0}
                  paddingY={0}
                  paddingX={0}
                  centered={true}
                  fullWidth={true}
                  useInnerWrapper={true}
                >
                  <CustomTreeView 
                    toggleDashboardDrawer={toggleDashboardDrawer}
                    showIcons={true}
                    defaultExpanded={['1']}
                    darkMode={darkMode}
                  />
                </AdaptiveLayout>
              </Grid>
              
              <Grid item xs={12} sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
                <AdaptiveLayout
                  backgroundColor={null}
                  marginY={0}
                  paddingY={0}
                  paddingX={0}
                  centered={true}
                  fullWidth={true}
                  useInnerWrapper={true}
                >
                  {children}
                </AdaptiveLayout>
              </Grid>
              
              <Grid item xs={12} sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
                <AdaptiveLayout
                  backgroundColor={null}
                  marginY={0}
                  paddingY={0}
                  paddingX={0}
                  centered={true}
                  fullWidth={true}
                  useInnerWrapper={true}
                >
                  <Footer darkMode={darkMode} />
                </AdaptiveLayout>
              </Grid>
            </Grid>
          </Box>
        </SnackBar>
      </ThemeProvider>
    </AppBarProvider>
  );
};

export default PublicLayout;